<!--
 * @Description: 
 * @Date: 2023-04-14 10:46:50
 * @LastEditors: czp
 * @LastEditTime: 2023-05-09 14:44:33
-->
<template>
	<div class="content-box">
		<el-table :data="list">
			<el-table-column prop="orderSn" align="center" width="150" label="兑换编号" />
			<el-table-column prop="exchangeGoodsName" align="center" label="兑换商品" />
			<el-table-column prop="exchangeGoodsNum" align="center" label="数量" />
			<el-table-column prop="createTime" align="center" width="160" label="兑换时间" />
			<el-table-column prop="statusDesc" align="center" label="订单状态">
				<template #default="scope">
					<span v-if="scope.row.type == '收入'" style="color: #34c758">收入</span>
					<span v-if="scope.row.type == '支出'" style="color: #ff3a30">支出</span>
				</template>
			</el-table-column>
			<el-table-column prop="totalIntegral" align="center" label="使用积分" />
			<el-table-column prop="options" align="center" label="操作" width="180">
				<template #default>
					<div>
						<el-button link>查看物流</el-button>
						<el-button link type="warning">确认收货</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup lang="ts" name="PointsExchangeRecord">
import { pointsGetExchangeGoodsRecord } from "@/service/modules/points";

const list = ref();
const getList = async () => {
	const { data } = await pointsGetExchangeGoodsRecord();
	list.value = data;
};

onMounted(() => {
	getList();
});
</script>

<style scoped lang="scss">
.content-box {
	height: 520px;
	padding: 20px;
	background-color: #ffffff;
}
.el-table {
	--el-bg-color: #f3ece0;
	--el-table-header-text-color: #c39f63;
}
.el-button {
	--el-color-warning: #c39f63;
}
</style>
